<template>
	<div class="app-container"> <!-- 根元素，设置背景 -->
	<view class="order-container">
		<view v-for="(order, index) in orderList" :key="index" class="order-item">
			<view class="order-header">
				<text class="order-id">订单号：{{ order.id }}</text>
				<text class="order-status">状态：{{ getStatus(order.status) }}</text>
			</view>
			<view class="order-body">
				<text>商品名称：{{ order.commodityName }}</text>
				<text>数量：{{ order.number }}</text>
				<text>下单时间：{{ order.datetime }}</text>
				<text>商家名称：{{ order.merchantName }}</text>
			</view>
		</view>
	</view>
	</div>
</template>

<script>
export default {
	data() {
		return {
			total:[],
			token: null,
			orderList: [],
		}
	},
	created(){
		//获取token在vue变量中
		this.recordToken();
		
	},
	methods: {
		recordToken() {
			this.token = localStorage.getItem('token');
			// console.log('Recorded token:', this.token); // 确认token是否正确记录
			this.findAllOrdersByTele();
		},
		getStatus(statusCode) {
			// 可根据状态码返回对应的状态描述
			switch (statusCode) {
				case 1:
					return '未配送';
				default:
					return '已配送';
			}
		},
		//根据用户id查询全部订单
		findAllOrdersByTele() {
			uni.request({
				url: 'http://localhost:8090/order/buyer/orders',
				method: 'GET',
				header: {
					'content-type': 'application/json',
					'token': this.token
				},
				success: (res) => {
					this.orderList = res.data.records;
					this.total=res.data
					console.log(this.orderList);
					console.log(this.total)
					
				},
				fail: (err) => {
					console.error('获取首页展示的商品列表请求失败：', err);
				}
			});
		},
	}
}
</script>

<style>
	/* 设置整个页面的背景 */
	.app-container {
		    background-image: url('https://web-tlias-mozi.oss-cn-beijing.aliyuncs.com/%E8%83%8C%E6%99%AF1.png');
		    background-size: cover; /* 背景图片覆盖整个页面 */
		    background-blend-mode: lighten; /* 背景混合模式 */
		    background-color: rgba(255, 255, 255, 0.5); /* 背景颜色，使图片变浅 */
		    min-height: 100vh; /* 确保至少覆盖视口高度 */
		    width: 100vw; /* 覆盖整个视口宽度 */
		}
	
	.order-container {
	    padding: 20px;
	    background-color: #ffffff; /* 背景颜色 */
	    border-radius: 8px; /* 边角圆润 */
	    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 盒子阴影 */
	    margin: 10px 0 10px 0; /* 与下一个订单容器的间距 */
	}
	
	.order-item {
	    border-bottom: 1px solid #ddd; /* 项之间的分隔线 */
	    padding-bottom: 10px;
	    margin-bottom: 10px;
	    transition: transform 0.3s ease; /* 平滑变换效果 */
	}
	
	/* 鼠标悬停效果 */
	.order-item:hover {
	    transform: translateY(-3px); /* 向上移动 */
	    background-color: #f8f8f8; /* 背景色变更 */
	}
	
	.order-header {
	    display: flex;
	    justify-content: space-between;
	    font-size: 18px;
	    color: #333;
	    font-weight: bold;
	}
	
	.order-body {
	    margin-top: 10px;
	    font-size: 16px;
	    color: #666;
	}
	
	.order-id, .order-status, text {
	    display: block;
	    margin-bottom: 5px;
	    line-height: 1.5;
	}
	
	.order-id {
	    color: #2C3E50;
	}
	
	.order-status {
	    color: #E74C3C;
	}

</style>
